<template>
  <view class="profile-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <CustomNavbar title="个人中心" />
    <!-- 头部背景 -->
    <view class="profile-header gradient-bg">
      <view class="user-profile">
        <view class="avatar">
          <text class="avatar-text">C</text>
        </view>
        <view class="user-info">
          <text class="user-phone">{{ userStore.maskedPhone }}</text>
           <view class="membership">
              <image class="crown" v-for="i in userStore.membershipLevel" :key="i" src="/static/icons/icon-xing.png" style="width: 48rpx; height: 48rpx;" />
            </view>
        </view>
      </view>
      
      <!-- 账户概览卡片 -->
      <view class="account-overview">
        <view class="overview-item">
          <text class="overview-value">{{ userStore.usedData }}GB</text>
          <text class="overview-label">已用流量</text>
        </view>
        <view class="overview-item">
          <text class="overview-value">{{ userStore.usedCharge }}元</text>
          <text class="overview-label">已用话费</text>
        </view>
        <view class="overview-item">
          <text class="overview-value">{{ userStore.voiceBalance }}分钟</text>
          <text class="overview-label">语音余量</text>
        </view>
        <view class="overview-item">
          <text class="overview-value">{{ userStore.points }}</text>
          <text class="overview-label">可用积分</text>
        </view>
      </view>
    </view>
    
    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="navigateTo('/pages/bill/bill')">
        <!-- <view class="menu-icon yellow">¥</view> -->
         <image src="/static/icons/icon-bill.png" alt=""/>
        <text class="menu-text">我的账单</text>
        <view class="nav-btn">
          <image class="nav-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
        </view>
      </view>
      <view class="menu-item" @click="navigateTo('/pages/package/package')">
        <image src="/static/icons/icon-balance.png" alt=""/>
        <text class="menu-text">套餐余量</text>
        <view class="nav-btn">
          <image class="nav-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
        </view>
      </view>
      <view class="menu-item" @click="navigateTo('/pages/recharge-record/recharge-record')">
        <image src="/static/icons/icon-record.png" alt=""/>
        <text class="menu-text">充值记录</text>
        <view class="nav-btn">
          <image class="nav-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
        </view>
      </view>
      <view class="menu-item" @click="navigateTo('/pages/detail-query/detail-query')">
        <image src="/static/icons/icon-query.png" alt=""/>
        <text class="menu-text">详单查询</text>
        <view class="nav-btn">
          <image class="nav-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
        </view>
      </view>
      <view class="menu-item">
        <image src="/static/icons/icon-setting.png" alt=""/>
        <text class="menu-text">设置</text>
        <view class="nav-btn">
          <image class="nav-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
        </view>
      </view>
      <view class="menu-item" @click="handleLogout">
        <image src="/static/icons/icon-quit.png" alt=""/>
        <text class="menu-text">退出当前账户</text>
        <view class="nav-btn">
          <image class="nav-icon" src="/static/icons/icon-right.png" mode="aspectFit" />
        </view>
      </view>
    </view>
    <CustomTabBar current="/pages/profile/profile" />
  </view>
</template>

<script setup>
import { useUserStore } from '@/store/user'
import CustomNavbar from '@/components/CustomNavbar.vue'
import CustomTabBar from '@/components/CustomTabBar.vue'

const userStore = useUserStore()

const navigateTo = (url) => {
  uni.navigateTo({ url })
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出当前账户吗？',
    success: (res) => {
      if (res.confirm) {
        // 处理退出逻辑
        uni.showToast({
          title: '已退出',
          icon: 'success'
        })
      }
    }
  })
}
</script>

<style scoped>
.profile-page {
   
  position: relative;
  z-index: 1;
  padding-top: calc(var(--status-bar-height) + 44px);
  padding-bottom: 130rpx;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.profile-header {
  padding: 60rpx 30rpx 40rpx;
  padding-top: 72rpx;
}


.user-profile {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30rpx;
}

.avatar-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.user-info {
  flex: 1;
}

.user-phone {
  color: rgba(255, 255, 255, 1);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 700;
line-height: 38rpx;
  display: block;
  /* margin-bottom: 15rpx; */
}

.membership {
  display: flex;
  /* gap: 4rpx; */
}

.crown {
  font-size: 32rpx;
}


.account-overview {
   display: flex;
  justify-content: space-around;
  text-align: center;
    align-items: center;
background: linear-gradient(180.00deg, rgba(255, 255, 255, 1),rgba(207, 229, 255, 1) 100%);
border-radius: 24rpx;
padding: 32rpx 24rpx;
}

.overview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overview-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.overview-label {
  font-size: 24rpx;
  color: #999;
}

.menu-list {
  margin: 0rpx 30rpx;
  border-radius: 24rpx;
background: rgba(255, 255, 255, 1);
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  /* border-bottom: 1rpx solid #F0F0F0; */
}
.menu-item image{
  width: 40rpx;
height: 40rpx;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  margin-right: 30rpx;
}

.menu-icon.yellow {
  background: #FFF9E6;
}

.menu-icon.blue {
  background: #E3F2FD;
}

.menu-icon.green {
  background: #E8F5E9;
}

.menu-icon.gray {
  background: #F5F5F5;
}

.menu-icon.red {
  background: #FFEBEE;
}

.menu-text {
  flex: 1;
  color:  rgba(51, 51, 51, 1);
font-family: HarmonyOS Sans SC;
font-size: 28rpx;
font-weight: 400;
line-height: 32rpx;
  margin-left: 16rpx;
}

.menu-arrow {
  font-size: 32rpx;
  color: #CCC;
}
.nav-btn {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx;
}

.nav-icon {
  width: 100%;
  height: 100%;
}
</style>

